<template>
    <div class="company">
        <div class='company1'>
            <div class="font20">公司信息</div>
            <el-form ref="form" label-width="125px">
                <el-form-item label="公司名称">
                    <el-input v-model="info.companyName" disabled></el-input>
                </el-form-item>
                <el-form-item label="统一社会信用代码">
                    <el-input v-model="info.creditCode" disabled></el-input>
                </el-form-item>
                <el-form-item label="注册日期">
                    {{info.registerDate | formatDate}}
                </el-form-item>
                <el-form-item label="注册资本">
                    <el-input v-model="info.registerAmount" disabled></el-input>
                </el-form-item>
                <el-form-item label="融资信息">
                    <el-input v-model="info.finanInfo" disabled></el-input>
                </el-form-item>
                <el-form-item label="公司Logo">
                    <div class="imgs"><img :src="info.logo" width="69" height="65" alt=""></div>
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input v-model="info.contactPerson" disabled></el-input>
                </el-form-item>
                <el-form-item label="联系人电话">
                    <el-input v-model="info.contactPhone" disabled></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class='company2'>
            <div class="font20">修改密码</div>
             <el-form ref="form" :model="form" label-width="125px">
                <el-form-item label="原密码">
                    <el-input v-model="form.oldPassword"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input v-model="form.newPassword"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input v-model="form.newPasswordAgen"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">确认</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { formatDate } from "@/utils/filter.js"
import { updatePassword } from "@/api/settings"
export default {
  data() {
    return {
      info:this.$store.state.user.info,
      form: {}
    }
  },
  filters: {
    formatDate(time) {
      var data = new Date(time)
      return formatDate(data, "yyyy-MM-dd")
    }
  },
  methods:{
      submit() {
        if(this.form.oldPassword == ''){
          this.$message.error("请输入旧密码!")
          return false;
        }
        if(this.form.newPassword == ''){
          this.$message.error("请输入新密码!")
          return false;
        }

        if(this.form.newPasswordAgen == ''){
          this.$message.error("请再次输入新密码!")
          return false;
        }

        if(this.form.newPassword != this.form.newPasswordAgen){
          this.$message.error("两次密码不匹配!")
          return false;
        }

      updatePassword(this.form.oldPassword,this.form.newPassword).then(data => {
        if (data.result) {
          this.$message({
            message: "设置成功！",
            type: "success"
          })
        } else {
          this.$message.error("设置失败!" + data.errMsg)
        }
      })
    }
  },
  components: {
    
  },
  created() {}
}
</script>  
<style rel="stylesheet/scss" lang="scss">
    .company{
        background-color: #ffffff;
        box-shadow: 0px 0px 8px 0px 
            rgba(43, 61, 86, 0.14);
        border-radius: 5px;
        padding: 4%;
        .company1{
            .el-input__inner{
                background-color: #fdfeff;
                border: solid 1px #d2d2d2;
            }
        }
        .company2 {
            border-top: solid 1px #d2d2d2;
            margin-top: 3rem;
            padding-top: 3rem;
            .el-button--primary{
                width: 135px;
                height: 33px;
                background-color: #f65c51;
                border-color: #f65c51;
                border-radius: 3px;
                line-height: 1;
                padding: 0;
            }
        }
        .company1,.company2{
            .font20{
                color: #333333;
                font-size: 20px;
                padding-left: 15px;
                position: relative;
                margin-bottom: 20px;
                &::after{
                    content: '';
                    width: 4px;
                    height: 15px;
                    background-color: #2f59ab;
                    border-radius: 2px;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                }
            }
            .el-form-item{
                margin-bottom: 8px;
                width: 50%;
            }
            .el-form-item__content,.el-form-item__label{line-height: 33px}
            .el-input__inner{
                border-radius: 3px;
                height: 33px;
            }
            .imgs{
                width: 69px;
                height: 65px;
                background-color: #fdfeff;
                border-radius: 3px;
                border: solid 1px #d2d2d2;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-pack: center;
                -webkit-flex-flow: column wrap;
                -ms-flex-flow: column wrap;
                flex-flow: column wrap;
                align-items: center;
            }
        }
    }
</style>